<template>
  <div>
    <div class="header">
      <span class="explain">说明：目前支持学科和关键字条件筛选</span>
      <el-button
        type="success"
        icon="el-icon-edit"
        class="rexplain addRexplain"
        size="small"
        @click="$router.push('/questions/new')"
        >新增试题</el-button
      >
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-row :gutter="0">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="学科" label-width="80px">
              <el-select
                v-model="subjectIDS"
                placeholder="请选择"
                style="width: 100%"
                @change="subjectChange"
              >
                <el-option
                v-for="item in formInline.subjectID"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="二级目录" label-width="80px">
              <el-select
                v-model="catalogIDS"
                placeholder="请选择"
                style="width: 100%"
              >
              <!-- formInline.catalogID -->
                <el-option v-for="item in formInline.catalogID"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="标签" label-width="80px">
              <el-select
                v-model="simpletagS"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option v-for="item in  formInline.tags"
                :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="关键字" label-width="80px">
              <el-input
                v-model="keywords"
                placeholder="根据题干搜索"
                style="width: 221px"
              >
              </el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item label="试题类型" label-width="80px">
            <el-select
              v-model="questionTypes"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option v-for="(item,index) in formInline.questionType"
              :key="index"
              :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="难度" label-width="80px">
            <el-select
              v-model="difficultys"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
              v-for="item in formInline.difficulty" :key="item.value"
              :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" label-width="80px">
            <el-select
              v-model="directions"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
              v-for="(item,index) in formInline.direction" :key="index"
              :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="录入人" label-width="80px">
            <el-select
              v-model="creatorIDs"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
               v-for="item in formInline.creatorID" :key="item.id"
               :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item label="题目备注" label-width="80px">
            <el-input
              v-model="remarks"
              placeholder=""
              style="width: 224.3px"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="企业名称" label-width="80px">
              <el-input
                v-model="shortNames"
                placeholder=""
                style="width: 224.3px"
              >
              </el-input>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="城市" label-width="80px">
              <el-select
                v-model="omits"
                placeholder="请选择"
                style="width: 111px"
                @change="getPc"
              >
                <el-option v-for="(item,index) in formInline.province" :key="index"
                :label="item" :value="item">
                </el-option>
              </el-select>
              <el-select
                v-model="citys"
                placeholder="请选择"
                style="width: 111px"
              >
                <el-option
                v-for="(item,index) in formInline.city" :key="index"
                :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="grid-content bg-purple btn">
            <el-form-item class="rexplain">
              <el-button @click="onClear" size="small">清除</el-button>
              <el-button type="primary" size="small" @click="onSubmit"
                >搜索</el-button
              >
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as simples } from '@/api/hmmm/directorys'
import { simple as simpletag } from '@/api/hmmm/tags'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import { list } from '@/api/base/users'
export default {
  name: 'questBank',
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      subjectIDS: '', // 学科绑定的值
      catalogIDS: '', // 二级目录绑定值
      simpletagS: '', // 获取标签数据
      questionTypes: '', // 试题类型
      difficultys: '', // 难度
      directions: '', // 方向
      creatorIDs: '', // 录入人
      keywords: '', // 关键字
      remarks: '', // 题目备注
      shortNames: '', // 企业名称
      omits: '', // 省
      citys: '', // 市
      formInline: {
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业名称
        province: null, // 企业所在省份
        city: null // 企业所在城市
      }
    }
  },
  created () {
    // 获取学科简单列表
    this.getSimple()
    this.getQuestionType()
    this.getProvinces()
    this.onClear()
  },
  methods: {
    // 获取省份数据
    async getProvinces () {
      const res = await provinces()
      this.formInline.province = res
    },
    // 选择省份触发
    getPc () {
      this.citys = ''
      this.getCitys()
    },
    // 获取城市数据
    async getCitys () {
      const res = await citys(this.omits)
      this.formInline.city = res
    },
    // 获取试题类型 数据 和 难度 和 方向 和 录入人
    async getQuestionType () {
      // const res = questionType.map(item => item.label)
      this.formInline.questionType = questionType
      this.formInline.difficulty = difficulty
      this.formInline.direction = direction
      const res = await list()
      this.formInline.creatorID = res.data.list
    },
    // 学科列表触发去获取二级目录数据
    subjectChange () {
      // 获取二级目录数据
      this.getSimples()
      // 获取标签数据
      this.catalogIDS = ''
      this.getSimpletag()
    },
    // 获取标签数据
    async getSimpletag () {
      const res = await simpletag({ subjectID: this.subjectIDS })
      this.formInline.tags = res.data
    },
    // 获取学科简单列表
    async getSimple () {
      const res = await simple()
      this.formInline.subjectID = res.data
    },
    // 获取二级目录简单数据
    async getSimples () {
      const res = await simples({ subjectID: this.subjectIDS })
      this.formInline.catalogID = res.data
    },
    // 点击清除
    onClear () {
      this.subjectIDS = null // 学科绑定的值
      this.catalogIDS = null // 二级目录绑定值
      this.simpletagS = null // 获取标签数据
      this.questionTypes = null // 试题类型
      this.difficultys = null // 难度
      this.directions = null // 方向
      this.creatorIDs = null // 录入人
      this.keywords = null // 关键字
      this.remarks = null // 题目备注
      this.shortNames = null // 企业名称
      this.omits = null // 省
      this.citys = null // 市
      //   this.formInline = {
      //     subjectID: this.formInline.subjectID, // 学科
      //     catalogID: null, // 二级目录
      //     tags: null, // 标签
      //     keyword: null, // 关键字
      //     questionType: null, // 试题类型
      //     difficulty: null, // 难度
      //     direction: null, // 方向
      //     creatorID: null, // 录入人
      //     remarks: null, // 题目备注
      //     shortName: null, // 企业名称
      //     province: this.formInline.province, // 企业所在省份
      //     city: null // 企业所在城市
      //   }
      this.$emit('tableDatas')
    },
    // 点击提交
    onSubmit () {
      const res = {
        subjectID: this.subjectIDS,
        catalogID: this.catalogIDS,
        simpletag: this.simpletagS,
        questionType: this.questionTypes,
        difficulty: this.difficultys,
        creatorID: this.creatorIDs,
        keyword: this.keywords,
        remark: this.remarks,
        shortName: this.shortNames,
        province: this.omits,
        city: this.citys
      }
      this.$emit('tableDatas', res)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 32px;
  margin-bottom: 15px;
  font-size: 12px;

  .explain {
    display: inline-block;
    color: pink;
  }
  .rexplain {
    text-align: center;
    float: right;
  }
}
.el-row {
  //   margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
// .bg-purple-dark {
//   // background: #c03d26;
// }
// .bg-purple {
//   // background: #428de4;
// }
// .bg-purple-light {
//   // background: #1d3b81;
// }
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.btn {
  float: right;
  margin-right: 3px;
}
.addRexplain {
  margin-right: 13px;
  margin-top: -5px;
}
.row-bg {
  padding: 0px 0;
  // background-color: #f9fafc;
}

.el-select:hover .el-input__inner {
  border-color: #c0c4cc;
}

.el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
</style>
